<template>
  <div id="fullscreenElement" class="previewContent">
    <div :class="[{ 'hide' : isHide }, 'navbar']">
      <div v-if="!isFullScreen" class="back-btn" @click="goBack">
        <van-icon style="padding: 0 15px;" name="arrow-left" size="15" />
        <div style="font-size: 15px;padding-right: 15px;">Back</div>
      </div>
    </div>
    <img class="preview" :src="cur" @click="imgClick" Alt="壁纸预览"/>
    <div :class="[{ 'hide' : isHide }, 'toolbar']">
      <van-button v-if="isFullScreen" plain type="default" @click="exitFullScreen" style="margin-right: 10px;">
        <i class="bi bi-fullscreen-exit"></i>
      </van-button>
      <van-button v-else plain type="default" @click="fullScreen" style="margin-right: 10px;">
        <i class="bi bi-fullscreen"></i>
      </van-button>
      <van-button plain type="default" @click="download" v-if="isWeb">
        <i class="bi bi-download"></i>
      </van-button>
      <van-button plain type="default" @click="download1" v-else>
        Save
      </van-button>
    </div>
  </div>
</template>

<script>  
export default {
    name:'ImagePreview',
    props:[''],
    data () {
      return {
        cur: '',
        isHide: false,
        isFullScreen: false,
        isWeb:/80/.test(location.port),
      };
    },

    components: {},

    computed: {},

    created() {
      this.cur = this.$route.query.curUrl
    },

    mounted() {
      const that = this
      // 监听全屏状态变化
      document.addEventListener('fullscreenchange', function () {
        if (that.isPageFullscreen()) {
          // 进入全屏
          that.isFullScreen = true
        } else {
          // 退出全屏
          that.isFullScreen = false
        }
      })
    },

    methods: {
      goBack() {
        this.$router.back()
      },
      // 检测页面是否处于全屏模式
      isPageFullscreen() {
          return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
      },
      fullScreen() {
        const elem = document.getElementById('fullscreenElement');

        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { // Firefox
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { // IE/Edge
          elem.msRequestFullscreen();
        }
      },
      exitFullScreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
          document.msExitFullscreen();
        }
      },
      imgClick() {
        this.isHide = !this.isHide
      },
      async download1(){
        window.ipcRenderer.send('apply1', this.cur);
      },
      async download(){ 
        const imageSrc = this.cur;  
        const fileName = imageSrc.substring(imageSrc.lastIndexOf('/') + 1);
        fetch(imageSrc)
          .then(response => response.blob())
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(link);
          });
      },
    },
  }

</script>
<style scoped>
.preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.previewContent {
  position: relative;
  height: calc(100vh - 4px);
}

.navbar, .toolbar {
  height: 52px;
  width: 100%;
  position: absolute;
  background-color: rgba(256, 256, 256, 0.6);
  backdrop-filter: saturate(50%) blur(8px);
  -webkit-backdrop-filter: saturate(50%) blur(8px);
  transition: 300ms;
}
.navbar {
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
}
.back-btn {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin: 0 10px;
  border-radius: 8px;
}
.back-btn:hover {
  background-color: rgba(200, 200, 200, 0.3);
}
.toolbar {
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hide {
  display:none;
}
</style>